<template>
  <div class="main">
    <div class="head" @click="goback"></div>
    <div class="text">
      <ul>
        <li>
          <div>
            <h2>日常保洁</h2>
            <p>提供家庭室内表面清洁，物品纳整理和高温消毒服务</p>
          </div>
        </li>
        <li>
          <div class="clearf">
            <h2>服务价格</h2>
            <p class="p1">日常保洁 <span class="rightp">35/小时</span></p>
            <p class="p2">2小时起</p>
          </div>
        </li>
        <li>
          <div>
            <h2>参考耗时</h2>
            <p>一居  <span style="float:right">2~3小时</span></p>
          </div>
        </li>
        <li>
          <div>
            <p>二居 <span style="float:right">3~4小时</span></p>
          </div>
        </li>
      </ul>
    </div>
    <div class="underbtn">
      <button>单次预约</button>
      <button>周期预约</button>
    </div>
  </div>
</template>

<script>
// import LifeServiceVue from '../LifeService.vue';
export default {
  data() {
    return {};
  },
  methods: {
    goback() {
      this.$router.replace({ name: 'LifeService' });
    },
  },
};
</script>

<style scoped lang='less'>
.main {
  background: rgb(230, 230, 230);
  height: 100%;
  .head {
    width: 100%;
    height: 576px;
    background-image: url("../../../assets/img/bjshouye.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: contain;
  }
  .text {
    ul {
      li {
        div {
          border-bottom: 5px solid rgb(207, 207, 207);
          padding-left: 20px;
        }
        &:nth-child(1) {
          div {
            /deep/ h2 {
              display: block;
              font-size: 20px;
              font-weight: normal;
            }
            p {
              margin-top: 50px;
              margin-bottom: 60px;
              font-size: 16px;
              color: rgb(161, 160, 160);
            }
          }
        }
        &:nth-child(2) {
          div {
            height: 200px;
            padding-right: 20px;
            /deep/ h2 {
              margin-top: 30px;
              display: block;
              font-size: 20px;
              font-weight: normal;
            }
            .p1 {
              color: rgb(161, 160, 160);
              margin-top: 50px;
              margin-bottom: 60px;
              font-size: 16px;
              margin-bottom: 0px;
            }
            .p2 {
              margin-top: 15px;
              font-size: 10px;
              color: rgb(182, 181, 181);
              margin-bottom: 26px;
            }
            .rightp {
              display: block;
              float: right;
              font-size: 13px;
              color: #ff5555;
              margin-bottom: 60px;
            }
          }
        }
        &:nth-child(3) {
          div {
            /deep/ h2 {
              margin-top: 30px;
              display: block;
              font-size: 20px;
              font-weight: normal;
              margin-bottom: 0;
            }
            p {
              color: rgb(161, 160, 160);
              margin-top: 30px;
              margin-bottom: 60px;
              font-size: 16px;
              margin-bottom: 20px;
            }
          }
        }
        &:nth-child(4) {
          p {
            color: rgb(161, 160, 160);
            margin-top: 64px;
            font-size: 16px;
            margin-bottom: 20px;
          }
        }
      }
    }
  }

  .underbtn {
    button {
      width: 50%;
      height: 92px;
      border: none;
      color: #fff;
      font-size: 15px;
      &:nth-child(1) {
        background: rgb(64, 155, 255);
      }
      &:nth-child(2) {
        background: rgb(255, 86, 84);
      }
    }
  }
  .clearf::after {
    content: "";
    display: block;
    clear: both;
  }
}
</style>